<template>
<div class="hot_news">
	<ul ref='news_box' :class="[overflow ? 'overflows news_box':'news_box']" >
		<li>
			<div class="content clearfix">
				<div>2018-8-18</div>
				<div><span>>></span><router-link tag='p' to='/'>国务院发文促进天然气发展 个股有望收到大红包（附股）</router-link></div>
			</div>
		</li>
	</ul>
	<div  ref="load" @click="loading" v-if="showload" class="open"><img src="../../../assets/img/open.png" alt="下拉框" ></div>
</div>
</template>

<script>
export default {
	data(){
		return {
			overflow:false,	 // 控制文章高度
			showload:false, // 控制加载更多按钮
			controlDir:0,
		}
    },
    created() {
    },
	methods:{
		loading(){
			this.overflow = !this.overflow;
			this.controlDir ++ ;
			this.$refs.load.style.transform = 'rotate('+ 180 * this.controlDir +'deg)' ;
		},
		getHeightStatus(){ // 获取高度的状态
			let h = this.$refs.news_box.clientHeight;
			// console.log(h)
			if(h <= 300){ // 当新闻数字大于360高就隐藏 并且加载更多文章出现
				this.overflow = false; 
				this.showload = false;
			}else {
				this.overflow = true;
				this.showload = true;
			}
		}
	},
	mounted(){
		this.getHeightStatus();
	},
	updated(){
		
	}
}
</script>

<style>
</style>